<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度新闻->海量中文资讯平台</title>
</head>

<body>

    <header>
        <!-- 最顶部区域已经做完 -->
        <div>
            <ul>
                <li> <a href=""> 网页</a></li>
                <li> <a href=""> 新闻</a></li>
                <li> <a href=""> 贴吧</a></li>
                <li> <a href=""> 知道</a></li>
                <li> <a href=""> 音乐</a></li>
                <li> <a href=""> 图片</a></li>
                <li> <a href=""> 视频</a></li>
                <li> <a href=""> 地图</a></li>
                <li> <a href=""> 文库</a></li>
            </ul>
            <ul>
                <li> <a href="">百度首页</a> </li>
                <li>
                    <a href="">用户名</a>
                    <ul>
                        <li> <a href="">我的主页</a> </li>
                        <li> <a href="">账号设置</a> </li>
                        <li> <a href="">退出</a> </li>
                    </ul>
                </li>
                <li>
                    <a href="">
                        <span>百度新闻客户端</span>
                        <img src="./img/newErweima_9fa03e0.png" alt="">
                    </a>
                </li>
            </ul>
        </div>
        <!-- 搜索区域 -->
        <div>
            <div>
                <a href="">
                    <img src="./img/图片.png" alt="">
                </a>
            </div>
            <div>
                <input type="text">
                <button>百度一下</button>
            </div>
            <div>
                <a href="">帮助</a>
            </div>
        </div>
        <!-- 页面导航 -->
        <div>
            <!-- nav元素，html5的新元素，容器元素 -->
            <nav>
                <a href="">首页</a>
                <a href="">国内</a>
                <a href="">国际</a>
                <a href="">军事</a>
                <a href="">财经</a>
            </nav>
        </div>
    </header>
    <!-- 中部区域 -->
    <div>
        <div>
            <div>
                <div>
                    <h2>热点要闻</h2>
                </div>
                <div>
                    <ul>
                        <li>
                            <h3><a href="">Lorem ipsum dolor sit amet.</a></h3>
                        </li>
                        <li><a href="">Lorem ipsum dolor sit amet.</a></li>
                        <li><a href="">Voluptas veritatis voluptatum voluptatibus. Quae.</a></li>
                        <li><a href="">Fugit autem cumque accusamus in!</a></li>
                        <li><a href="">Ex rerum voluptate nostrum. Consequuntur.</a></li>
                        <li><a href="">Quaerat quasi accusamus ad unde.</a></li>
                        <li><a href="">Itaque provident ad hic repellat.</a></li>
                    </ul>
                    <ul>
                        <li>
                            <h3><a href="">Distinctio cupiditate esse maxime neque.</a></h3>
                        </li>
                        <li><a href="">Lorem ipsum dolor sit amet.</a></li>
                        <li><a href="">At ut quam quae aperiam.</a></li>
                        <li><a href="">Culpa rem dignissimos natus assumenda.</a></li>
                        <li><a href="">Recusandae nostrum dolores eligendi ipsum.</a></li>
                        <li><a href="">Dicta quis incidunt perferendis repellat.</a></li>
                        <li><a href="">Eum maxime ab commodi debitis!</a></li>
                    </ul>
                    <ul>
                        <li>
                            <h3><a href="">Quasi consectetur aspernatur ipsa? Dolorem.</a></h3>
                        </li>
                        <li><a href="">Lorem ipsum dolor sit amet.</a></li>
                        <li><a href="">Esse fugit provident alias voluptatem!</a></li>
                        <li><a href="">Officia dolorem reprehenderit numquam perspiciatis.</a></li>
                        <li><a href="">Iste magnam alias doloribus praesentium.</a></li>
                        <li><a href="">Repellat sit iusto praesentium fugit.</a></li>
                        <li><a href="">Id, asperiores! Consequatur, totam provident.</a></li>
                    </ul>
                    <ul>
                        <li>
                            <h3><a href="">Voluptas aliquid autem labore pariatur.</a></h3>
                        </li>
                        <li><a href="">Lorem ipsum dolor sit amet.</a></li>
                        <li><a href="">Minima voluptate repudiandae delectus nulla!</a></li>
                        <li><a href="">Ipsum in qui quia natus!</a></li>
                        <li><a href="">Rerum, ipsam illo. Odio, aut?</a></li>
                        <li><a href="">Ducimus laborum expedita assumenda ea.</a></li>
                        <li><a href="">Saepe praesentium veniam dignissimos repellendus!</a></li>
                    </ul>
                    <ul>
                        <li>
                            <h3><a href="">Officiis quidem perferendis nulla odit?</a></h3>
                        </li>
                        <li><a href="">Lorem ipsum dolor sit amet.</a></li>
                        <li><a href="">Ab incidunt numquam aliquam illo.</a></li>
                        <li><a href="">Quas ad recusandae eum modi.</a></li>
                        <li><a href="">Veniam quasi consectetur non ipsa?</a></li>
                        <li><a href="">Facere mollitia nisi commodi nulla.</a></li>
                        <li><a href="">Voluptates aperiam veniam rerum unde.</a></li>
                    </ul>
                </div>
            </div>
            <!-- 右边 -->
            <div>
                <div>
                    <div>
                        <!-- 放置图片 -->
                        <div>
                            <div>
                                <a href="">
                                    <img src="./img/图片1.png" alt="">
                                    <h3>Lorem ipsum dolor sit amet.</h3>
                                </a>
                            </div>
                            <div>
                                <a href="">
                                    <img src="./img/图片2.png" alt="">
                                    <h3>Lorem ipsum dolor sit amet.</h3>
                                </a>
                            </div>
                        </div>
                        <!-- 左右切换的按键 -->
                        <div>
                            <span>&lt</span><span>&gt</span>
                        </div>
                        <!-- 切换的小圆圈 -->
                        <ul>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                    <!-- 附加链接 -->
                    <div>
                        <a href="">
                            <img src="./img/图片3.png" alt="">
                        </a>
                    </div>
                </div>

                <!-- 中间区域 -->
                <div>
                    <div>
                        <h3>
                            热搜新闻词
                            <span>HOT WORDS</span>
                            <!-- 下面的这个span是一个图标 -->
                            <span>

                            </span>
                        </h3>
                    </div>
                    <ul>
                        <li>Lorem.</li>
                        <li>Ut.</li>
                        <li>Sint.</li>
                        <li>Quia.</li>
                        <li>Cumque!</li>
                        <li>Commodi?</li>
                        <li>Consequatur.</li>
                        <li>Fuga?</li>
                        <li>Nisi?</li>
                        <li>Odio!</li>
                    </ul>
                </div>

                <div>
                    <h3>
                        热搜新闻词
                        <span>HOT WORDS</span>
                        <!-- 下面的这个span是一个图标 -->
                        <span>

                        </span>
                    </h3>
                </div>
                
            </div>

        </div>
    </div>
</body>

</html>